<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<style>
    #header{
        background-color: #8b8f9c;
        width: 100%;
        height: 60px;
        line-height: 60px;
    }
    #header_left a{
        text-decoration: none;
        color: white;

    }
    #header_left a:hover{
        color: #ff6b23;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
    #r-footer {
        background-color: #4c4c4c;
        width: 100%;
        height: 400px;
    }
    .r-footer-container {
        width: 1200px;
        height: 320px;
        margin: 0 auto;

    }

    .baozhang {
        height: 74px;
        font-size: 16px;
        color: #fff;
        background-image: url("salecar_img/b1.png");
    }

    .link-clearfix {
        width: 1200px;
        height: 160px;
        margin: 40px auto;
    }

    .link-left {
        width: 758px;
        height: 123px;
        float: left;
    }

    .link-left_item {
        width: 300px;
        height: 123px;
        margin-bottom: 6px;
        display: inline-block;
        vertical-align: top;
    }

    .link-left_item-title {
        width: 234px;
        height: 21px;
        font-size: 16px;
        color: #fff;
        margin: 0 0 10px 0;
    }
    .link-right_app{
        float: left;
        width: 272px;
        height: 136px;
    }
    .r-item{
        width: 88px;
        float: left;
        text-align: center;
        margin-left: 32px;
    }
    .r-item>span{
        color: #bbbbbb;
        padding-bottom: 8px;
        margin: 0 auto;
    }
    ul {
        display: inline-block;
        padding: 0;
        margin: 0 40px 0 0;
        vertical-align: top;
    }

    li {
        line-height: 24px;
        font-size: 14px;
        list-style: none;
    }

    li > a {
        color: #adadad;
    }
    .text {
        font-size: 14px;
    }
    .r-basic__info {
        width: 540px;
        margin-left: 60px;
        float: left;
    }
    .title {
        font-size: 18px;
        color: #222;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .tag {
        float: left;
        border-radius: 2px;
        margin-left: 4px;
        padding: 0 5px;
        height: 17px;
        max-width: 80px;
    }
    .tags {
        height: 17px;
        overflow: hidden;
        margin: 13px 0;
        color: #fff;
    }
    .price {
        min-height: 154px;
        background-color: #fafafa;
        padding: 0 20px;
        font-size: 14px;
    }
    .price .carprice {
        height: 60px;
        line-height: 60px;
        border-bottom: 2px dashed #ddd;
    }
    .num {
        display: inline-block;
        min-width: 2em;
        font-size: 30px;
    }
    .num-tax {
        display: inline-block;
        min-width: 2em;
    }
    .cut-tip {
        display: inline-block;
        height: 27px;
        line-height: 27px;
        padding: 0 7px;
        float: right;
        color: #ff6b23;
        background-color: #fff;
        border: 1px solid #ffa14d;
        border-radius: 4px;
        margin-top: 17px;
        cursor: pointer;
    }
    .price .servicefee {
        color: #bbb;
        line-height: 32px;
    }
    .price .service {
        display: inline-block;
        margin-left: 62px;
        color: #777;
    }
    .servicefee .fee {
        color: #333;
        margin-left: 20px;
    }
    .servicefee .detail {
        float: right;
        font-size: 12px;
        cursor: pointer;
    }
    .service-item {
        display: inline-block;
        margin-right: 34px;
        float: left;
    }
    .iconfont {
        display: inline-block;
        font-size: 12px;
        font-weight: bold;
        margin-right: 6px;
        color: #bdbdbd;
    }
    .service-item {
        display: inline-block;
        margin-right: 34px;
        float: left;
    }
    .parameters {
        display: inline-block;
        margin-top: 25px;
    }
    .parameters .parameter {
        display: inline-block;
        float: left;
        min-width: 125px;
        padding: 0 13px;
        margin: 11px 0;
        text-align: center;
    }
    .parameters .parameter .value {
        font-size: 18px;
        color: #333;
    }
    .parameters .parameter .name {
        font-size: 14px;
        color: #bbb;
    }


</style>
<body>
<div id="app">
<div id="header">
    <span id="header_left">
    <a href="">严选车</a>
    <a href="">基本信息</a>
    <a href="">车检报告</a>
    <a href="">图片合集</a>
    <a href="">配置参数</a>
    </span>
    <span style="float: right">
    <el-button style="margin-right: 20px;background-color: #ffa14d" @click="open">咨询车况</el-button>
    <el-button style="margin-right: 40px;background-color: #ff6b23" @click="open">砍价</el-button>
        </span>
</div>
    <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 69px">
        <el-breadcrumb-item>宁波二手车</el-breadcrumb-item>
        <el-breadcrumb-item>宁波二手车出售</el-breadcrumb-item>
        <el-breadcrumb-item>测试数据1</el-breadcrumb-item>
        <el-breadcrumb-item>测试数据2</el-breadcrumb-item>
        <span style="float: right;position: relative">
            <el-input type="text" placeholder="请输入内容">
                <!--slot="append" 设置搜索按钮嵌入到文本框里面-->
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </span>
    </el-breadcrumb>
    </div>
</div>
    <div class="imgBox" style="float:left;position: relative">
        <img class="img-slide img1" src="salecar_img/car1.jpg" alt="1" style="width: 600px;height: 400px">
    </div>
<div class="r-basic__info" style="float:left;position: absolute;margin: 0px 700px">
    <h1 class="title">
        <img src="//img1.rrcimg.com/_next/static/src/assets/yanxuan-icon_2pJ-s.png" alt="严选车">奥迪-奥迪Q7 2018款 40 TFSI 舒适版（平行进口车）
    </h1>
    <ul class="tags clearfix">
        <li class="tag" style="background-color:#9298B0">自营</li>
        <li class="tag" style="background-color:#9298B0">急售</li>
        <li class="tag" style="background-color:#9298B0">0过户</li>
    </ul>
    <div class="price">
        <p class="carprice clearfix">
      <span class="newcar-price">
        <span class="num">
          33.00
        </span>万</span>
            <span class="newcar-price-tax">新车含税<span class="num-tax">85.51</span>万<i class="iconfont icon-tip-icon2-07d8d303"></i>
      </span>
            <span class="cut-tip">降价提醒</span>
        </p>
        <p class="servicefee clearfix">
            <span>服务费</span>
            <span class="fee">26400元（车价×8%）</span>
            <span class="detail" data-click="car-detail_basicinformation-servicedetail_click">查看详情&nbsp;&gt;</span>
        </p><ul class="service clearfix">
        <li class="service-item">
            <i class="iconfont">
            </i>249项检测</li>
        <li class="service-item">
            <i class="iconfont">

            </i>90天可退</li><li class="service-item">
        <i class="iconfont">

        </i>调表车赔付</li>
        <li class="service-item">
            <i class="iconfont">

            </i>禁售盗抢查封车</li>
        <li class="service-item">
            <i class="iconfont">

            </i>代办过户</li>
        <li class="service-item">
            <i class="iconfont">

            </i>14天无忧退</li>
    </ul>
    </div>
    <ul class="parameters">
        <li class="parameter">
            <p class="value">9.67<!-- -->万公里</p>
            <p class="name">表显里程</p>
        </li>
        <li class="parameter">
            <p class="value">4年2个月</p>
            <p class="name">上牌</p>
        </li>
        <li class="parameter">
            <p class="value">天津</p>
            <p class="name">车辆所在地</p>
        </li><li class="parameter">
        <p class="value">国五<i class="iconfont icon-tip-icon2-07d8d303">
        </i></p><p class="name">
        <a class="qian" target="_blank" rel="noopener noreferrer" click="basicinformation-qian_click">外迁查询</a>
    </p></li><li class="parameter">
        <p class="value">自动</p>
        <p class="name">变速箱</p>
    </li>
        <li class="parameter" data-hover="car-detail_basicinformation-configuration-transfernote_hover">
            <p class="value">0<!-- -->次<i class="iconfont icon-tip-icon2-07d8d303">
            </i>
            </p>
            <p class="name">过户记录</p>
        </li>
    </ul>
    <span style="float: right">
    <el-button style="margin-right: 20px;background-color: #ffa14d">咨询车况</el-button>
    <el-button style="margin-right: 40px;background-color: #ff6b23">砍价</el-button>
        </span>
    <p>电话咨询</p>
    <p>400-050-9352</p>
</div>
</div>
<div>
    <img class="img-slide img1" src="buycar_img/car-detecting.png" alt="1" style="margin: 300px 0px">
</div>
</div>
<div id="r-footer">
    <div class="r-footer-container">
        <div class="baozhang"></div>
        <div class="link-clearfix">
            <div class="link-left">
                <div class="link-left_item">
                    <div class="link-left_item-title">关于我们</div>
                    <ul>
                        <li><a href="">公司介绍</a></li>
                        <li><a href="">联系我们</a></li>
                        <li><a href="">加入我们</a></li>
                        <li><a href="">加盟合伙人</a></li>
                    </ul>
                    <ul>
                        <li><a href="">用户服务协议</a></li>
                        <li><a href="">隐私政策</a></li>
                        <li><a href="">法律声明</a></li>
                        <li><a href="">协议及声明</a></li>
                    </ul>
                </div>
                <div class="link-left_item" style="width: 140px">
                    <div class="link-left_item-title">交易流程</div>
                    <ul>
                        <li><a href="">买车流程</a></li>
                        <li><a href="">卖车流程</a></li>
                        <li><a href="">异地购车</a></li>
                    </ul>
                </div>
                <div class="link-left_item">
                    <div class="link-left_item-title">二手车精选</div>
                    <ul>
                        <li><a href="">车型库</a></li>
                        <li><a href="">二手车资讯</a></li>
                        <li><a href="">二手车问答</a></li>
                    </ul>
                    <ul>
                        <li><a href="">二手车估价</a></li>
                        <li><a href="">二手车迁入标准</a></li>
                    </ul>
                </div>
            </div>
            <div class="link-right">
                <div class="link-right_tel">
                    <div class="number">400-039-6051</div>
                    <div class="time">周一至周日 9:00-18:00</div>
                    <div class="text">免费咨询(咨询、建议、投诉)</div>
                </div>
                <div class="link-right_app">
                    <div class="r-item">
                        <span>关注微信</span>
                        <div class="lazyload">
                            <img src="salecar_img/wechat.jpg" alt="" style="width: 100%;">
                        </div>
                    </div>
                    <div class="r-item">
                        <span>下载APP</span>
                        <div class="lazyload">
                            <img src="salecar_img/down-app.png" alt="" style="width: 100%;">
                        </div>
                    </div>
                </div>
                <div class="link-right_sns">
                </div>
            </div>
        </div>
    </div>
    <div id="r-footer-copyright">
        <div class="r-footer-copyright-container">
            <img src="salecar_img/wangbei.png" alt="" >
        </div>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!--异步需要 引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                arr:["salecar_img/car1.jpg","salecar_img/car2.jpg","salecar_img/car3.jpg"]
            }
        },
        methods:{
            open() {
                this.$prompt('请输入电话号码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
                    inputErrorMessage: '电话号码格式不正确'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: '你的电话号码是: ' + value
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }
        }
    })
</script>
</html>